<template>
	<view class="post-detail-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" :title="detail.title||'详情'"></CustomNav>
		<view class="block content-block" :style="'margin-top:'+mt">
			<mp-html :content="detail.content"></mp-html>
		</view>
		<view @click="openNavigate()" class="block map-block">
			<view class="text">{{detail.address}}</view>
			<view class="iconfont icon-daohang"></view>
		</view>
	</view>
</template>

<script>
	import {getPostDetail} from '@/api/post.js'
	export default{
		data(){
			return{
				topBgColor: 'rgba(0,0,0,0)',
				id:null,
				detail:{
					title:'',
					content:'',
					address:'',
					latitude:null,
					longitude:null,
				},
			}
		},
		methods:{
			getDetail(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getPostDetail({id:this.id}).then(res=>{
					this.detail=res;
				})
			},
			openNavigate(){
				uni.openLocation({
					latitude:this.detail.latitude*1,
					longitude:this.detail.longitude*1,
					name:this.detail.address
				})
			},
		},
		onLoad(e) {
			this.id=e.id
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.post-detail-page{
		overflow: hidden;
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
		
		.block {
			width: $content-width;
			margin: 0 auto;
			background: #fff;
			border-radius: 8px;
			margin-bottom: 30rpx;
			padding: 30rpx;
		}
		.map-block{
			display: flex;
			align-items: center;
			.text{
				width: calc(100% - 50rpx);
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
			}
			.iconfont{
				font-size: 34rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width:50rpx;
				
			}
		}
	}
</style>